<template>
	<view class="page_box">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false"></u-navbar>

		
		<view class="content_box ">
			<view class="swiper-banner">
				<u-swiper :list="imglist" mode="number" indicator-pos="bottomRight" height="464" border-radius="0"></u-swiper>
			</view>
			<view class="usrInfo-content flex justify-between align-end">
				<view class="flex align-end overflow" style="width: 70%;">
					<view class="user-avatar">
						<image class="img" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" mode="aspectFill"></image>
					</view>
					<view class="userinfo-ditail">
						<view class="f32 text-bold">玛卡巴卡</view>
						<view class="text-tipc">从业10年|作品数12|四川</view>
					</view>
				</view>
				<navigator hover-class="none" url="./designer" class="flex align-center">
					<text class="text-tipc">全部作品</text>
					<i class="text-tipc cuIcon-right"></i>
				</navigator>
			</view>
			<view class="usertext-content content-border">
				<view class="f34">黑暗骑士·北欧日式民宿</view>
				<view class="flex align-center" style="margin-top: 25rpx;">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_address.png" style="width: 16rpx;height: 22rpx;"></image>
					<text class="text-tipc">成都市金牛区万达广场</text>
				</view>
				<view class="detail-list">
					<view class="list-item flex align-center" v-for="(item,index) in detailList" :key="index">
						<image :src="item.ico" @load="load" :data-id='index' :style="{width:item.width+'rpx',height:item.height+'rpx'}" ></image>
						<text class="f24" style="margin-left: 10rpx;">{{item.title}}：{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="content-border padding detail-content">
				<view class="drawer-item">
					<view class="title">户型图</view>
					<view class="fxtimg-box img-box">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/fxt.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="text-cont">
						整合客厅，阳台和北卧室，成为一个南北通透，长10.8米的开放式起居餐厨空间。
					</view>
				</view>
				<view class="drawer-item">
					<view class="title">厨房</view>
					<view class="cfimg-box img-box">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="text-cont">
						厨房采用开放式让料理环境更明亮。
					</view>
				</view>
				<view class="drawer-item">
					<view class="title">客厅</view>
					<view class="cfimg-box img-box">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="text-cont">
						以玻璃木质与铁件勾勒出清透圆弧涉及体型，形成场域的暧昧交错。
					</view>
				</view>
				<view class="drawer-item">
					<view class="title">卧室</view>
					<view class="cfimg-box img-box">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="text-cont">
						卧室很简单，窗外的风景就是最好的装饰。
					</view>
				</view>
			</view>
			<view class="bottom-bar flex align-center justify-between padding">
				<view class="flex align-center">
					<view class="bar-item flex flex-direction justify-center align-center" @click="Collection(index)">
						<i :class="iscollect ? 'cuIcon-likefill f30' : 'cuIcon-like f30'" style="margin-bottom: 10rpx;"></i>
						<text class="f28">{{ collectNum }}</text>
					</view>
					<view class="bar-item flex flex-direction justify-center align-center" style="margin-left: 54rpx;">
						<i class="cuIcon-share f30" style="margin-bottom: 10rpx"></i>
						<text class="f28">分享</text>						
					</view>
				</view>
				<navigator url="./bookAnAppt" hover-class="none" class="yykf-btn">预约看房</navigator>
			</view>
			
			
			
		</view>
		
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			imglist:[
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png",
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png"
			],
			detailList:[
				{
					ico:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fx.png",
					title:"户型",
					text:"一室",
					width:'',
					height:'',
					
				},{
					ico:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_mj.png",
					title:"面积",
					text:"70m²",
					width:'',
					height:'',
				},{
					ico:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fg.png",
					title:"风格",
					text:"现代简约",
					width:'',
					height:'',
				},{
					ico:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_ys.png",
					title:"预算",
					text:"12万",
					width:'',
					height:'',
				},{
					ico:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_lx.png",
					title:"类型",
					text:"毛坯房",
					width:'',
					height:'',
				}
			],
			iscollect:false,
			collectNum:165
		};
	},
	onShow() {},
	methods: {
		load(e){
			this.detailList[e.currentTarget.dataset.id].width = e.detail.width / 2
			this.detailList[e.currentTarget.dataset.id].height = e.detail.height / 2			
		},
		Collection(){
			this.iscollect = !this.iscollect
			this.iscollect ? this.collectNum += 1:this.collectNum -= 1
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.swiper-banner{
		position: relative;
	}
	.usrInfo-content{
		position: relative;
		padding: 30rpx 30rpx 30rpx 174rpx;
		.user-avatar{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 4rpx solid white;
			box-sizing: border-box;
			position: absolute;
			left: 30rpx;
			top: -30rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.text-tipc{
			color: #717171;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}
	.detail-content{padding-bottom: 200rpx;}
	.usertext-content{
		padding: 30rpx;
		.text-tipc{
			color: #999999;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
		.detail-list{
			margin-top: 50rpx;
			.list-item{
				width: 33.33%;
				float: left;
				padding-left: 10rpx;
				margin-bottom: 30rpx;
			}
		}
	}
	.content-border{
		border-bottom: 20rpx solid #f8f8f8;
		overflow: hidden;
	}
	.bottom-bar{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: white;
		padding: 10rpx 30rpx 50rpx;
		z-index: 99;
		.yykf-btn{
			height: 78rpx;
			line-height: 78rpx;
			background: #4a515b;
			border-radius: 39px;
			color: white;
			text-align: center;
			width: 68%;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
		}
		.cuIcon-likefill{
			color: red;
		}
	}
	.drawer-item{
		margin-bottom: 70rpx;
		.title{
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #232323;
			margin-bottom: 30rpx;
		}
		.img-box{
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.fxtimg-box{
			width: 100%;
			height: 718rpx;			
		}
		.cfimg-box{
			width: 100%;
			height: 490rpx;
			border-radius: 20rpx;
		}
		.text-cont{
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			color: #000000;
			margin-top: 30rpx;
		}
	}
}
</style>